import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
const myDirective = {
  install(app) {
    app.directive('imgLazy', {
      mounted(el, binding) {
        el.src = defaultImg
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerDom) => {
            if (isIntersecting) {
              stop()
              el.src = binding.value
              el.onerror = function () {
                el.src = defaultImg
              }
            }
          },
          {
            threshold: 0
          }
        )
      }
    })
  }
}
export default myDirective
